<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<style>
    table {
        border: 1px solid black;
    }

    tr,
    td {
        border: 1px solid black;

    }
</style>

<body>
    <div class="tab">
        <table>
            <tr>
                <th>选中</th>
                <th>序号</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>加一</th>
                <th>数量</th>
                <th>减一</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" true-value="1" false-value="0" v-model="ifChoice"
                        @click="test"></td>
                <td>01</td>
                <td>衣服</td>
                <td>{{price}}</td>
                <td><button v-on:click="plus">+</button></td>
                <td><input type="text" name="" id="" v-model="number"></td>
                <td><button v-on:click="min">-</button></td>
                <td>{{price*number}}</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td colspan="8">总计</td>
                <td></td>
            </tr>
        </table>
        <h1>{{ifChoice}}</h1>
    </div>
</body>
<script>
    const vue = new Vue({
        el: ".tab",
        data: {
            number: 1,
            price: 500,
            ifChoice: ""
        },
        methods: {
            plus() {
                this.number = ++this.number
            },
            min() {
                if (this.number > 1) {
                    this.number = --this.number
                } else {
                    this.number = this.number
                }
            },
            test() {
                console.log(this.ifChoice)
            }
        },

    })
</script>

</html>